const blanknumber_config = ({
  name: 'blanknumber',
  text: '序号填空',
  icon: 'blanknumber',
  tooltip: '插入填空',
});

tinymce.PluginManager.add(blanknumber_config.name, function (editor, url) {
  registerButton({editor});

  return {
    getMetaData: () => ({
      name: blanknumber_config.name,
    }),
  };
});


/**
 * 渲染容器
 */
function renderBox({editor, data}) {
  const el = editor.dom.create('div', null, editor.getContent());
  const tragetList = el.querySelectorAll(`[data-name="${blanknumber_config.name}"]`);
  const number = tragetList.length + 1;
  let dataContent = {
    content: number
  }
  const elLine = editor.dom.create(
    'span',
    {
      contenteditable: false,
      class: `xe-${blanknumber_config.name}`,
      'data-name': blanknumber_config?.name,
      'data-content': JSON.stringify(dataContent)
    },
    number + ''
  );
  el.innerHTML = elLine.outerHTML
  return el;
}

/**
 * 渲染 HTML
 * @returns
 */
function renderHTML({editor, data}) {
  const elLine = renderBox({editor, data});

  return elLine.innerHTML;
}

function getIndex({editor}) {
  const el = editor.dom.create('div', null, editor.getContent);
  const targetList = el.querySelectorAll(`[data-name="${config.name}"]`);
  return targetList.length;
}

function formatContent({editor}) {
  editor.selection.setCursorLocation(
    editor.selection.getNode().parentNode,
    editor.selection.getRng()?.endOffset
  );
}


function registerButton({editor}) {
  function onSetup(api) {
  }

  function onAction() {
    editor.execCommand('mceInsertContent', false, renderHTML({editor}));
    //formatContent({editor});
  }

  editor.ui.registry.getAll().icons.images || editor.ui.registry.addIcon('blanknumber', '<svg t="1709342207258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6272" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M509.9 474.1h150v20.5h-150zM509.9 530.6h150v21h-150zM509.9 587.6h150v22.5h-150zM509.9 415.6h150v22h-150z" fill="#4ED0D6" p-id="6273"></path><path d="M512 87C278.2 87 87 278.2 87 512s191.2 425 425 425 425-191.2 425-425S745.7 87 512 87z m237.4 564.1H646.1c33.5 17.5 65.1 39 94 63.9l6 5.2-26.2 31.1-6.1-5.1c-31.6-26.5-63.5-48.8-97.3-68.2l-9.5-5.5 23.6-21.5h-90.5l23.6 20.4-6.9 6.1c-30.5 26.9-67.7 50.4-110.5 69.8l-5.7 2.6-26.3-33.6 9.5-4.1c39.1-16.8 73.4-37.3 102.1-61.1h-106v-31.6c-39.3 15.3-82 28.2-127.2 38.4l-7.7 1.7-10.4-42.3 8.3-1.6c18-3.4 36.6-7.7 55.5-12.8V442.6h-58.5v-42h58.5V277.1h42.5v123.5h54v42h-54V590c14.8-5.1 29.3-10.8 43-16.3l11-4.4v40.8h33V377.6h91.9c1.4-7.8 2.6-15.2 3.6-22.5H436.9v-39.5h130.8c1.1-11.6 1.9-23.2 2.8-34.6l0.6-8.5 42.4 5.6-0.6 7.6c-0.5 6.9-1.2 13.9-1.9 20.6-0.3 3.2-0.6 6.3-0.9 9.3h122.3v39.5H605.3c-1.2 8.3-2.4 15.7-3.5 22.5h100.1v232.5h47.5v41z" fill="#4ED0D6" p-id="6274"></path></svg>')

  editor.ui.registry.addToggleButton(blanknumber_config.name, {
    icon: blanknumber_config.icon,
    tooltip: blanknumber_config.tooltip,
    onAction,
    onSetup,
  });

  editor.ui.registry.addToggleMenuItem(blanknumber_config.name, {
    text: blanknumber_config.text,
    icon: blanknumber_config.icon,
    onAction,
    onSetup,
  });
}
